<template>
  <el-dialog title="请选择门店" :visible.sync="_visible" width="700px">
    <div class="hui-dialog-branch">
      <el-transfer v-model="selected" :data="branch" :props="byname" :titles="titles" filterable></el-transfer>
    </div>

    <div slot="footer" class="hui-text-right">
      <el-button @click="handleVisible">取 消</el-button>
      <el-button @click="handleCheck" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
   * hpro-dialog-branch
   * @module components/hpro-dialog-branch
   * @desc 门店选择控件
   *
   * @param { boolean } visible - 模态框的显示隐藏，用:visible.sync绑定
   * @param { array } value - 已经选中的优惠券或者红包列表，用:value.sync或v-model绑定，格式[{id: 'id', label: 'label'}]
   */
export default {
  name: 'hpro-dialog-branch',
  componentName: 'hpro-dialog-branch',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    visible: Boolean,
    value: Array
  },
  data () {
    return {
      branch: [],
      byname: {
        key: 'id',
        label: 'label'
      },
      titles: ['未选择', '已选择'],
      selected: []
    }
  },
  computed: {
    // 模态框打开关闭
    _visible: {
      get () {
        let visible = this.visible
        if (visible) {
          this.getBranch()
        }
        return this.visible
      },
      set (val) {
        if (val) {
          this.$emit('open')
        } else {
          this.$emit('close')
        }
        this.$emit('update:visible', val)
      }
    },
    _value: {
      get () {
        this.getSelected()
        return this.value
      },
      set (val) {
        this.$emit('change', val)
        this.$emit('update:value', val)
      }
    }
  },
  methods: {
    // 获取所有门店列表
    getBranch () {
      let branch = []
      let tmp = [
        {
          id: '1',
          label: '门店名称1'
        },
        {
          id: '2',
          label: '门店名称2'
        },
        {
          id: '3',
          label: '门店名称3'
        },
        {
          id: '4',
          label: '门店名称4'
        },
        {
          id: '5',
          label: '门店名称5'
        },
        {
          id: '6',
          label: '门店名称6'
        },
        {
          id: '7',
          label: '门店名称7'
        },
        {
          id: '8',
          label: '门店名称8'
        },
        {
          id: '9',
          label: '门店名称9'
        },
        {
          id: '10',
          label: '门店名称10'
        }
      ]
      tmp.map(element => {
        branch.push(element)
      })
      this.branch = branch
    },

    // 获取已选择的门店
    getSelected () {
      let value = this.value
      let tmp = []
      value.map(element => {
        tmp.push(element.id)
      })
      this.selected = tmp
    },

    // 切换模态框显示隐藏
    handleVisible () {
      let _visible = this._visible
      this._visible = !_visible
    },

    // 选择事件
    handleCheck () {
      let branch = this.branch
      let selected = this.selected
      let tmp = []
      selected.map(element => {
        branch.map(item => {
          if (element === item.id) {
            tmp.push(item)
          }
        })
      })
      this._value = tmp
      this.handleVisible()
    }
  }
}
</script>

<style lang="less">
.hui-dialog-branch {
  display: flex;
  justify-content: center;
}
</style>
